<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>统计页面B（点标题切换统计）</title>
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="app2" class="container">
    <div class="header">
        <a href="./index.html" title="点击切换统计"><span class="title">∞ XX数据统计 ∞</span></a>
        <!-- /.header -->
    </div>

    <div class="content">
        <div class="left">
            <div class="left-1">
                <div class="title"><span>XX对象统计</span></div>
                <div class="body">
                    <div class="time-wrapper">
                        <div class="item active" group="L1" val="1">月</div>
                        <div class="item" group="L1" val="2">季</div>
                        <div class="item" group="L1" val="3">年</div>
                    </div>
                    <div class="r1"><span id="p2-left1-total">0</span><span class="small">人</span></div>
                    <div id="p2-ss-sex1" class="r2"></div>
                    <div class="r3">
                        <div id="p2-ss-sex2" class="r3"></div>
                    </div>
                </div>
                <!-- /.left-1 -->
            </div>

            <div class="left-2">
                <div class="title"><span>XX职级TOP5</span></div>
                <div class="body">
                    <div class="time-wrapper">
                        <div class="item active" group="L2" val="1">月</div>
                        <div class="item" group="L2" val="2">季</div>
                        <div class="item" group="L2" val="3">年</div>
                    </div>
                    <div class="r1">
                        <div id="p2-ss-l2-r1" class="r1"></div>
                    </div>
                </div>
                <!-- /.left-2 -->
            </div>
            <!-- /.left -->
        </div>

        <div class="center center-p2">
            <div class="title"><span>XX次数统计</span></div>
            <div class="body">
                <div class="time-wrapper">
                    <div class="item active" group="C" val="1">月</div>
                    <div class="item" group="C" val="2">季</div>
                    <div class="item" group="C" val="3">年</div>
                </div>
                <div class="r0"><span id="p2-center-total">0</span><span class="small">次</span></div>
                <div class="r-title-1"><div class="txt">XX类型分布统计</div></div>
                <div class="r1">
                    <div id="p2-ss-c-r1-c1" class="c1"></div>
                    <div id="p2-ss-c-r1-c2" class="c2"></div>
                    <div id="p2-ss-c-r1-c3" class="c3"></div>
                </div>
                <div class="r-title-1"><div class="txt">XX次数汇总趋势</div></div>
                <div class="r2">
                    <div id="p2-ss-c-r2"></div>
                </div>
            </div>
            <!-- /.center -->
        </div>

        <div class="right">
            <div class="right-1">
                <div class="title"><span>当年XX时长统计</span></div>
                <div class="body">
                    <div class="r1">
                        <div class="r-title-2"><div class="txt">XX总时长</div></div>
                        <div class="number number-1"><span id="p2-r1-total">0</span><span class="small">小时</span></div>
                        <div class="r-title-2"><div class="txt">平均时长</div></div>
                        <div class="number"><span id="p2-r1-avg">0</span><span class="small">小时</span></div>
                        <div class="r-title-2"><div class="txt">最长时间</div></div>
                        <div class="number"><span id="p2-r1-max">0</span><span class="small">小时</span></div>
                        <div class="r-title-2"><div class="txt">最短时间</div></div>
                        <div class="number"><span id="p2-r1-min">0</span><span class="small">分钟</span></div>
                    </div>
                </div>
                <!-- /.right-1 -->
            </div>

            <div class="right-2">
                <div class="title"><span>XX部门TOP5</span></div>
                <div class="body">
                    <div class="r1">
                        <div class="time-wrapper">
                            <div class="item active" group="R2" val="1">月</div>
                            <div class="item" group="R2" val="2">季</div>
                            <div class="item" group="R2" val="3">年</div>
                        </div>
                        <div class="r1">
                            <div id="p2-ss-r2-r1" class="r1"></div>
                        </div>
                    </div>
                </div>
                <!-- /.right-2 -->
            </div>
            <!-- /.right -->
        </div>
    </div>
    <!-- /.container -->
</div>

<!-- Scripts -->
<script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/jquery.pagination.min.js"></script>
<script src="./js/data.js"></script>
<script>
   
    $(function () {
        initPage2();

        // 绑定事件：月、季、年
        $(".time-wrapper .item").click(function () {
            // 切换按钮样式
            $(this).parent().find(".item").removeClass("active");
            $(this).addClass("active");
            var group = $(this).attr("group");
            var val = $(this).attr("val");

            // 点击[月、季、年]按钮时触发此事件（本地演示版代码） 
            switch (group) {
                case "L1":
                    initPage2Left1(val);
                    break;
                case "L2":
                    initPage2Left2(val);
                    break;
                case "C":
                    initPage2Center(val);
                    break;
                case "R1":
                    // Nothing.
                    break;
                case "R2":
                    initPage2Right2(val);
                    break;
                default:
                    break;
            }

            // 点击[月、季、年]按钮时触发此事件（从服务端获取数据版代码） 
            // $.ajax({
            //     url: "/home/statistics2/single",
            //     data: {group: group, type: val},
            //     type: "GET",
            //     dataType: "json",
            //     success: function (result) {
            //         // console.log(result);
            //         switch (group) {
            //             case "L1":
            //                 data2.left1 = result;
            //                 initPage2Left1(val);
            //                 break;
            //             case "L2":
            //                 data2.left2 = result;
            //                 initPage2Left2(val);
            //                 break;
            //             case "C":
            //                 data2.center = result;
            //                 initPage2Center(val);
            //                 break;
            //             case "R1":
            //                 // Nothing.
            //                 break;
            //             case "R2":
            //                 data2.right2 = result;
            //                 initPage2Right2(val);
            //                 break;
            //             default:
            //                 break;
            //         }
            //     },
            //     error: function (xhr, textStatus, errorThrown) {
            //         // session失效
            //         if (xhr.status === 401) {
            //             window.location.reload();
            //         } else if (xhr.status === 500) {
            //             // alert("HTTP Status: 500 服务器内部错误");
            //         } else {
            //             // alert("HTTP Status: " + xhr.status);
            //         }
            //     }
            // });
        });

    });

    function initPage2() {
        initPage2Left1();
        initPage2Left2();
        initPage2Center();
        initPage2Right1();
        initPage2Right2();
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Init Page 2 Begin
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    function initPage2Left1() {
        // R1
        var dataR1 = data2.left1.r1;
        $("#p2-left1-total").html(dataR1);

        // R2
        var dataR2 = data2.left1.r2;
        var dom = document.getElementById("p2-ss-sex1");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            legend: {
                orient: 'vertical',
                x: 'right',
                align: 'left',
                left: '50%',
                top: '30%',
                data:[
                    {name:'男', icon:'circle'},
                    {name:'女', icon:'circle'}
                ],
                formatter: function(name) {
                    var total = 0;
                    var value;
                    for (var i in dataR2) {
                        var item = dataR2[i];
                        total += item.value;
                        if (item.name === name) {
                            value = item.value;
                        }
                    }
                    var percent = total === 0 ? 0 : ((value/total)*100).toFixed(0);
                    return $.formatString("{0}：{1} ({2}%)", name, value, percent);
                },
                textStyle: {
                    color: "#fff"   // 图例文字颜色
                }
            },
            series: [
                {
                    name:'性别统计',
                    type:'pie',
                    center: ['22%', '50%'],
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        show: false
                    },
                    data: dataR2
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);

        // R3
        var dataR3 = data2.left1.r3;
        var dom = document.getElementById("p2-ss-sex2");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                show: false,
                left: '2.5%',
                right: '2.5%',
                top: '10%',
                bottom: '0',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['20-29岁', '30-39岁', '40-49岁', '50-59岁'],
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        fontSize: 12
                    }
                }
            ],
            yAxis : [
                {
                    show: true,
                    type : 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    minInterval: 1
                }
            ],
            series : [
                {
                    name:'人数',
                    type:'bar',
                    barWidth: '40%',
                    label: {
                        show: false,
                        position: 'insideTop'
                    },
                    data: dataR3
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);
    }

    function initPage2Left2() {
        // R1
        var dataR1 = data2.left2.r1;
        var dom = document.getElementById("p2-ss-l2-r1");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            title : {
                text: '',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                left: 'left',
                data: dataR1.legendData,
                textStyle: {
                    color: "#fff"   // 图例文字颜色
                }
            },
            series : [
                {
                    name: 'XX职级TOP5',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data: dataR1.seriesData,
                    label: {
                        show: true
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);
    }

    function initPage2Center() {
        // R0
        var dataR0 = data2.center.r0;
        $("#p2-center-total").html(dataR0);

        // R1
        var dataR1 = data2.center.r1;
        var dataMap = {
            'p2-ss-c-r1-c1': [
                {value:dataR1[0], name:'AA类型', label:{show:true}, itemStyle:{color:'rgba(50,211,235,1)'}},
                {value:dataR0-dataR1[0], name:'', label:{show:false}, itemStyle:{color:'rgba(255,123,123,0.2)'}}
            ]
            ,
            'p2-ss-c-r1-c2': [
                {value:dataR1[1], name:'BB类型', label:{show:true}, itemStyle:{color:'rgba(255,123,123,1)'}},
                {value:dataR0-dataR1[1], name:'', label:{show:false}, itemStyle:{color:'rgba(255,123,123,0.2)'}}
            ]
            ,
            'p2-ss-c-r1-c3': [
                {value:dataR1[2], name:'CC类型', label:{show:true}, itemStyle:{color:'rgba(91,196,159,1)'}},
                {value:dataR0-dataR1[2], name:'', label:{show:false}, itemStyle:{color:'rgba(91,196,159,0.2)'}}
            ]
        };

        for (var key in dataMap) {
            var dom = document.getElementById(key);
            var chart = echarts.init(dom, GLOBAL_THEME);
            var option = {
                series: [
                    {
                        name:'XX类型分布统计',
                        type:'pie',
                        center: ['50%', '50%'],
                        radius: ['75%', '90%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: ['{c|\n\n{c}}', '{b|{b}}'].join('\n'),
                            rich: {
                                c: {
                                    fontSize: 36,
                                    fontWeight: 'bold',
                                    lineHeight: 12
                                },
                                b: {
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: '#fff',
                                    height: 60
                                }
                            }
                        },
                        data: dataMap[key]
                    }
                ]
            };
            chart.clear();
            chart.setOption(option, true);
        }

        // R2
        var dataR2 = data2.center.r2;
        var dom = document.getElementById("p2-ss-c-r2");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                show: false,
                left: '2%',
                right: '2%',
                top: '10%',
                bottom: '0',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataR2.xAxisData,
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                },
                splitLine: {
                    show: false
                },
                minInterval: 1
            },
            series: [{
                name:'XX次数',
                data: dataR2.seriesData,
                type: 'line',
                areaStyle: {}
            }]
        };
        chart.clear();
        chart.setOption(option, true);
    }

    function initPage2Right1() {
        var dataR1 = data2.right1.r1;
        $("#p2-r1-total").html(dataR1.total);
        $("#p2-r1-avg").html(dataR1.avg);
        $("#p2-r1-max").html(dataR1.max);
        $("#p2-r1-min").html(dataR1.min);
    }

    function initPage2Right2() {
        // R1
        var dataR1 = data2.right2.r1;
        var dom = document.getElementById("p2-ss-r2-r1");
        var chart = echarts.init(dom, GLOBAL_THEME);
        var option = {
            title : {
                text: '',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                left: 'left',
                data: dataR1.legendData,
                textStyle: {
                    color: "#fff"   // 图例文字颜色
                }
            },
            series : [
                {
                    name: 'XX部门TOP5',
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '60%'],
                    data: dataR1.seriesData,
                    label: {
                        show: true
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.clear();
        chart.setOption(option, true);
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Init Page 2 End
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////

    // 格式化字符串
    $.formatString = function(str) {
        for ( var i = 0; i < arguments.length - 1; i++) {
            str = str.replace("{" + i + "}", arguments[i + 1]);
        }
        return str;
    };
</script>
</body>
</html>